
{% include "basehead.html" %}
{% load staticfiles %}

<style>
    h1 {
        color:rgb(187, 187, 187);
    }
    
    .emoji{
        width:29.694px
    }
    .caption{
        background-color:rgb(187, 187, 187);
    }
    .thumbnail{
        background-color:rgb(187, 187, 187);
        padding:2px;
    }
    
    .thumbtext{
        margin-top:0px
    }
    
    blockquote{
        border-left-color:gray
    }
</style>


<title>许愿墙</title>
    <body style="background-image:url({% static 'image/camouflage.png' %})">
    
        <div class="container" style="margin-top:5%; ">
            <!-- Header -->
             <div class="page-header" id='pageheader' style='text-align:center;'>
                 <div style="margin:0 7.6%">
                     <h1 class="animated pulse"">许 愿 墙</h1> 
                     <!-- <h2 style="margin-top:0;"><small>The Wishing Wall</small></h2> -->
                     <p>
                     <a href="/add/" id="add" type="button" class = "btn btn-lg btn-success">
                         <!--许下愿望-->
                     </a>
                     <a href="/del/" id="del" type="button" class = "btn btn-lg btn-danger">
                         <!--删除愿望-->
                     </a>
                     <a href="/info/" id="info" type="button" class = "btn btn-lg btn-primary">
                         <!--许下愿望-->
                     </a>
                     </p>
                 </div>
             </div>
            <!-- Page Start -->
            <div class="cow container-fluid" style="padding:0 6.5%; font-family:Microsoft Yahei;">
              {%for wishing in wishings %}
                  <div class="col-sm-6 col-md-4" >
                    <div class="thumbnail" >
                      <div class="caption">
                        {% load emoji_tags %}
                        <h3 class="thumbtext">{{wishing.text|emoji_replace_unicode}}</h3>
                        <p class="text-right" style="margin-bottom:0px"><small>ID:{{wishing.id}}</small></p>
                        <p class="text-right" style="margin-bottom:0px"><small>{{wishing.date|date:"Y年m月j日,H:i"}}</small></p>
                      </div>
                    </div>
                  </div>
              {% endfor %} 
            </div>
            
        {% include "baseend.html" %}
        </div>
   
        <!--<script type="text/javascript" src="http://www.w3cschool.cc/try/jeasyui/jquery.easyui.min.js"></script>-->
        <link href="//cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
    </body>
    <script>
    $(document).ready(function(){
    //Larger thumbnail preview 
    $("div.thumbnail").hover(function() {
        $(this).css({'z-index' : '10'});
        $(this).find('.caption').addClass("hover").stop()
            .animate({
                padding: '20px' 
            }, 200);
    }, 
    function() {
        $(this).css({'z-index' : '0'});
        $(this).find('.caption').removeClass("hover").stop()
        .animate({
            padding: '9px'
        }, 400);
    });
    });
</script>
    <script>
        //$('.col-sm-6').draggable();  #没啥用啊。。
        console.log($("#pageheader"))
        $("#pageheader").css("border-bottom",'0'); //删除 width 属性
        $(function(){
            console.log('Run here?')
        });
    </script>
</html>